<template>
  <div class="myTeamListComponent" v-if="oItem" :style="{
    paddingTop: oItem.main.wrapperPT+'px',
    paddingBottom: oItem.main.wrapperPB+'px',
    paddingLeft: oItem.main.wrapperPLR+'px',
    paddingRight: oItem.main.wrapperPLR+'px',
  }">

  <div class="wrapper" :style="{
    paddingTop: oItem.main.modulePT+'px',
    paddingBottom: oItem.main.modulePB+'px',
    paddingLeft: oItem.main.modulePLR+'px',
    paddingRight: oItem.main.modulePLR+'px',

    backgroundColor: oItem.main.wrapperBgColor,
    backgroundImage: oItem.main.wrapperBgImg?('url(\''+oItem.main.wrapperBgImg+'\')'):'none',

    borderTopLeftRadius: oItem.main.wrapperBTR+'px',
    borderTopRightRadius: oItem.main.wrapperBTR+'px',
    borderBottomLeftRadius: oItem.main.wrapperBBR+'px',
    borderBottomRightRadius: oItem.main.wrapperBBR+'px',
  }">

    <div class="content" :class="'style'+oItem.main.style" :style="oItem.main.style==2?(
      'background-color:'+oItem.main.moduleBgColor+';background-image:'+(oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\');'):'none;')+'border-top-left-radius:'+oItem.main.moduleBTR+'px;border-top-right-radius:'+oItem.main.moduleBTR+'px;border-bottom-left-radius:'+oItem.main.moduleBBR+'px;border-bottom-right-radius:'+oItem.main.moduleBBR+'px;'):''">

      <div class="item" v-for="l in list" :key="l.id" :style="oItem.main.style==1?(
        'margin-bottom:'+oItem.main.moduleSpace+'px;background-color:'+oItem.main.moduleBgColor+';background-image:'+(oItem.main.moduleBgImg?('url(\''+oItem.main.moduleBgImg+'\');'):'none;')+'border-top-left-radius:'+oItem.main.moduleBTR+'px;border-top-right-radius:'+oItem.main.moduleBTR+'px;border-bottom-left-radius:'+oItem.main.moduleBBR+'px;border-bottom-right-radius:'+oItem.main.moduleBBR+'px;'
      ):''">

        <div class="left">
          <img :src="l.avatar" v-if="l.avatar" alt="" class="avatar" :style="{
            width: oItem.main.logoSize+'px',
            height: oItem.main.logoSize+'px',
          }" />
          <div class="info">
            <div class="phone" :style="{ 
            color: oItem.main.titleFontColor||'transparent',
            fontSize: oItem.main.titleFontSize+'px'
         }">{{ l.phone }}</div>
            <div class="bottom">
              <p class="name" :style="{ 
            color: oItem.main.descFontColor||'transparent',
            fontSize: oItem.main.descFontSize+'px'
         }">{{ l.name }}</p>
              <p class="tempName" :style="{ 
            color: oItem.main.linkFontColor||'transparent',
            fontSize: oItem.main.linkFontSize+'px'
         }">{{ l.tempName }}</p>
            </div>
          </div>
        </div>
        <div class="right">
          <button class="seeBtn" :style="{ 
            color: oItem.main.btnFontColor||'transparent',
            fontSize: oItem.main.btnFontSize+'px'
         }">查看</button>
        </div>

      </div>

    </div>

  </div>


  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
import avatar from "@/static/images/avatar.jpg";
export default {
  name: "myTeamListComponent",
  data() {
    return {
      list: [
        {
          id: 1,
          avatar: avatar,
          phone: "18888888888",
          name: "徐婷婷",
          tempName: "模板A",
        },
        {
          id: 2,
          avatar: avatar,
          phone: "18888888888",
          name: "刘美丽",
          tempName: "模板A",
        },
        {
          id: 3,
          avatar: avatar,
          phone: "18888888888",
          name: "徐婷婷",
          tempName: "模板A",
        },
        {
          id: 4,
          avatar: avatar,
          phone: "18888888888",
          name: "刘美丽",
          tempName: "模板A",
        },
        {
          id: 5,
          avatar: avatar,
          phone: "18888888888",
          name: "徐婷婷",
          tempName: "模板A",
        }
      ],
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.myTeamListComponent {box-sizing: border-box;
  .wrapper{box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;}
  .content {
    display: flex;box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
    flex-direction: column;
    &.style1{box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
        .item{box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
            background-color: #fff;
            padding:15px 10px 15px 15px;
            box-shadow: 3px 3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee,-3px -3px 3px #eee;
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    &.style2{box-sizing: border-box;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-attachment: scroll;
    box-shadow: 3px 3px 3px #eee,-3px 3px 3px #eee,3px -3px 3px #eee,-3px -3px 3px #eee;
        .item{
            padding:15px 10px 15px 15px;
            margin-left:15px;
            margin-right:15px;
        }
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 100%;margin-right:10px;
        }
        .info {
          display: flex;
          flex-direction: column;
          .phone {
            height: 25px;
            display: flex;
            align-items: center;
            color: #555555;
            font-size: 16px;
          }
          .bottom {
            height: 25px;
            display: flex;
            align-items: center;
            .name {
              margin-right: 20px;
              color: #b8b8b8;
              font-size: 14px;
            }
            .tempName {
              font-size: 14px;
              color: #e8b57e;
            }
          }
        }
      }
      .right {
        .seeBtn {
          font-size: 14px;
          border: none;
          padding: 5px 10px;
          background-color: transparent;
        }
      }
    }
  }
}
</style>
